<template>
	<view class="list-right" :style="{'z-index': isShow ? 300:10}">
		<view class="author-img">
			<!-- @click.stop="toCreaterPage" -->
			<view style="padding-left: 10upx;">
				<image class="img" :src="video.headimgurl" v-if="video.headimgurl" @click="touseinfo"></image>
				<image class="img" :src="video.shop_logo" v-else @click.stop="toCreaterPage"></image>
				<view class="follow cuIcon-add" style="bottom: -5px;" v-if="video.uid !== Number(useid)">
					<image @click.stop="addfollow" v-if="video.is_follow==0" src="@/static/guanzhuya.png" mode=""
						style="width: 20px; height: 20px;"></image>
					<image @click.stop="cancelFollow" v-else src="@/static/quguanya.png" mode=""
						style="width: 20px; height: 20px;"></image>
				</view>	
				<view class="follow cuIcon-add">
					<image src="../../static/chakan.png" mode="" style="width: 58upx;height: 40upx;"></image>
					{{video.access_num}}
				</view>
			</view>
		</view>
		<!--<view class="right-box">
			<view class="icon cuIcon-likefill" :class="{fav: isFav}" @click="handleFollow"></view>
			<image @click.stop="handleFollow" v-if="video.is_like == 0" class='icon' src="../../static/images/like_before.png" mode=""></image>
			<image @click.stop="handleFollow" v-else class='icon' src="../../static/images/like_after.png"></image>
			<view class="count">{{video.praise_num}}</view>
		</view> -->
		<view class="right-box ss" style="margin-top: 150upx;">
			<!-- <view class="icon cuIcon-commentfill" @click="handleComment"></view> -->
			<image class='icon' src="../../static/images/common.png" mode="" style="padding-left: 14upx;" @click="changeTitle"></image>
			<text class="count" style="margin-left: 10upx;">{{video.commentNum}}</text>
		</view>  
		 <view v-if="video.is_collvideo==1" style="color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;">
		 	<!-- <view class="icon cuIcon-commentfill" @click="handleComment"></view> -->
		 	<image src="@/static/cang.png" style="width: 32px; height: 32px;margin-left: 20upx;" @click="nocoll(video.id)"
		 		></image>
		 		<text class="count" style="margin-top: 20upx;margin-left: 15upx;">{{video.collvideo_num}}</text>
		 </view> 
		 <view v-if="video.is_collvideo==0 && video.status !== 0&& video.status !== 2"  style="color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;">
		 	<!-- <view class="icon cuIcon-commentfill" @click="handleComment"></view> -->
		 	<image src='@/static/wcang.png' style="width: 32px; height: 32px;margin-left: 20upx;"
		 		@click="coll(video.id)"></image>
		 		<text class="count" style="margin-top: 20upx;margin-left: 15upx;">{{video.collvideo_num}}</text>
		 </view> 
		
<!-- 		<image src='@/static/zhuanfa.png' style="width: 32px; height: 32px;margin-left: 18px;"
			@click="handleForward"></image> -->
		<!--  @click.stop="handleForward" -->
		<view class="right-box" style="padding-left: 14upx;">
			<image class='icon' src="@/static/zhuanfa.png" mode="" @click="caozuo" v-if="typed == 0"></image>
		</view>

		<view v-if="video.is_coupon ==1" class="music-img" @click="closew" :class="{'pauseAnimate': isLike}">
			<image class="img" src="../../static/images/coupon_player.png" />
		</view>

		<coupon :couponList="list" :isShow="isShow" @getcoupon='setCoupon' @close='closew' :uid="userInfos.id"></coupon>
		<!-- <button @click="open">打开弹窗</button> -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" :duration="2000" :before-close="true" @close="close" @confirm="confirm"
				content="是否前往登录页面"></uni-popup-dialog>
		</uni-popup>
		<uni-popup @maskClick="close" ref="caozuo" type="bottom">
			<view class="bot">
				<view class="lista">
					选择操作
				</view>
				<view class="listd" @click="zhiding" v-if="video.status !== 2 &&video.is_top !==2&&video.is_per_rec==0&&video.type_num!==2&&video.uid ==useid">
					置顶视频
				</view>
				<view class="listd" @click="quxiao" v-if="video.is_per_rec == 1&&video.is_top !==2&&video.uid ==useid ">
					取消置顶
				</view>
				<view class="listd" @click="touchstart" v-if="video.is_collvideo==0&&video.uid ==useid">
					删除视频
				</view>
				<view class="listd" @click="handleForward" >
					转发视频
				</view>
				<view class="listd" @click="jubao">
					举报视频
				</view>
				<view class="quxiao" @click="closed()">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import coupon from '../coupon.vue'
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				fileUrl: getApp().globalData.fileUrl,
				isFollow: false,
				isFav: false,
				isPauseAnimate: true,
				isForward: false,
				isLike: false,
				// video: '',
				avatar: '',
				userLogo: '',
				clickLoading: false,
				isShow: false,
				list: [],
				userInfos: {}
			}
		},
		mounted() {
			// console.log(this.video, "右边组件")
			this.videoInfo = this.video
			this.avatar = this.fileUrl + this.video.avatar
			this.userLogo = this.video.shop_logo
			this.userInfo = this.$store.getters.getuserInfo
			return
			this.getFav()
		},

		created() {
			console.log(this.video.uid,this.useid,"怎么没生效")
			this.$http.getreadprofile({
				shop_id: ''
			}).then(res => {
				if (res.status == 200) {
					this.shopType = res.data.cateres

					this.userInfos = res.data
					console.log(res, "用户信息")
				}
			})
		},
		props: ['playIndex', 'video', 'onOk', 'videoArray', 'typed', 'userInfo', 'useid', 'typew'],
		components: {
			coupon
		},
		// watch:{
		// 	videoInfo(videoInfo){
		// 		console.log(videoInfo)
		// 		this.goodsList = videoInfo.goodsList
		// 	}
		// },
		methods: {
			jubao() {
				let br_uid = this.video.uid
				let shipin_id = this.video.id
				let shop_id = this.video.shop_id
				uni.navigateTo({
					url: `/pages/index/shipinjubao?br_uid=${br_uid}&shipin_id=${shipin_id}&shop_id=${shop_id}`
				})
			},
			handleForward() {
				
				uni.share({
					type: 0,
					title: `${this.video.title}`,
					summary: `${this.video.shopinfo_shop_name}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.video.video_url}`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.video.cover_img,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			nocoll(id) {
				var br_uid = this.videoArray[this.playIndex].uid
				var uid = this.useid
				uni.request({
					url: 'https://dsx.cdzer.com/api/video/delcollvideo', //仅为示例，并非真实接口地址。
					data: {
						video_id: id,
						uid
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "收藏")
						if (res.data.status == 200) {
							this.video.is_collvideo = 0
							this.video.collvideo_num--
							uni.showToast({
								title: '取消成功'
							})
						}
					}
				});
			},
			coll(id) {
				var br_uid = this.videoArray[this.playIndex].uid
				var uid = this.useid
				uni.request({
					url: 'https://dsx.cdzer.com/api/video/collvideo', //仅为示例，并非真实接口地址。
					data: {
						video_id: id,
						uid
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "收藏")
						if (res.data.status == 200) {
							this.video.is_collvideo = 1
							this.video.collvideo_num++
							uni.showToast({
								title: '收藏成功'
							})
							setTimeout(() => {}, 1500)
						}else{
							uni.showToast({
								title:'请先登录',
								icon:'none'
							})
						}
					}
				});
			},
			touseinfo() {
				console.log(this.video.uid==this.useid)
				if(this.video.uid==this.useid){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.navigateTo({
						url: `/pages/tabBar/uerinfo?userId=${this.video.uid}`
					})
				}
				
			},
			quxiao() {

				var video_id = this.videoArray[this.playIndex].id
				this.$http.quzhi({
					video_id,
				}).then(res => {
					console.log(res, "微信登录没有走这里吗")
					if (res.status == 200) {
						uni.showToast({
							title: '取消成功'
						})
						this.$refs.caozuo.close()
					} else {
						uni.showToast({
							title: res.mess,
							icon: 'none'
						})
					}
				}).catch(err => {

				})
			},
			touchstart(index, id) {
				let that = this
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条视频吗?',
						success: function(res) {
							if (res.confirm) {
								// that.delzz(that.idlist)
								console.log(that.videoArray[that.playIndex].id)
								that.del(that.videoArray[that.playIndex].id)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					});
				}.bind(this), 100);

			},
			// zhiding(index,id){
			// 	let that = this
			// 	this.Loop = setTimeout(function() {
			// 		uni.showModal({
			// 			title: '置顶',
			// 			content: '请问要置顶本条视频吗?',
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					// that.delzz(that.idlist)
			// 					console.log(that.videoArray[that.playIndex].id)
			// 					that.zhidings(that.videoArray[that.playIndex].id)
			// 				} else if (res.cancel) {
			// 					console.log('用户点击取消');
			// 				}

			// 			}
			// 		});
			// 	}.bind(this), 100);
			// },
			zhiding(id) {
				var video_id = this.videoArray[this.playIndex].id
				this.$http.zhiding({
					video_id,
				}).then(res => {
					console.log(res, "微信登录没有走这里吗")
					if (res.status == 200) {
						uni.showToast({
							title: '置顶成功'
						})
						// this.video.is_top = 2
						this.$refs.caozuo.close()
					} else {
						uni.showToast({
							title: res.mess,
							icon: 'none'
						})
					}
				}).catch(err => {

				})
			},
			del(id) {
				uni.request({
					url: 'https://dsx.cdzer.com/merchants/Video/delete', //仅为示例，并非真实接口地址。
					data: {
						id: id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "视频列表")
						// this.works = res.data.data
						if (res.data.status == 1) {
							uni.showToast({
								title: res.data.mess
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabBar/mydetail'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
						}
					}
				});
			},
			confirm() {
				console.log("确定")
				uni.navigateTo({
					url: '/pagesB/login/login'
				})
			},
			closed() {
				this.$refs.caozuo.close()
			},
			changeTitle() {
				// 自定义事件 titleChanged，该事件会传一个参数 "新的标题"
				this.$http.getreadprofile({
					shop_id: ''
				}).then(res => {
					if (res.status == 200) {
						this.$emit("titleChanged", "true")
						this.onOk()
					} else {
						// this.open()
						this.$emit("titleChanged", "true")
					}
				})


			},
			closew() {
				console.log("有没有进来呀")
				if (this.list.length == 0) {
					// uni.showLoading({
					// 	title:'请求中...'
					// })
					this.getCouponList()
				} else {
					this.isShow = !this.isShow
				}

			},
			// 获取点赞信息
			getFav() {
				uni.request({
					url: this.baseUrl + '/user/queryUserLike?userId=' + this.video.id + '&videoId=' + this.video
						.id,
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'userId': this.userInfo.id,
						'userToken': this.userInfo.userToken
					},
					success: (res) => {
						if (res.data.status === 200) {
							this.isFav = res.data.data
						}
					}
				})
			},
			// 打开评论界面
			handleComment() {
				// uni.navigateTo({
				// 	url: '../../pagesC/comment/comment?videoId=' + this.video.id + '&createrId=' + this.video.userId + '&videoDesc=' + this.video.videoDesc
				// })
			},
			// 打开分享与举报
			handleForward() {
				console.log( this.video.uid,"分享",this.useid)
				uni.share({
					type: 0,
					title: `${this.videoInfo.shop_name}`,
					summary: `${this.videoInfo.shop_name}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.videoInfo.video_url}`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.videoInfo.cover_img,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			// 跳转到作者个人界面
			toCreaterPage() {
				console.log(this.video, "店铺Id")
				var name = "首页"
				uni.redirectTo({
					url: `/pagesC/home/personage/personage?userId=${this.video.shop_id}&circle_id=${this.video.circle_id}&typename=${name}`
				})
				// uni.navigateTo({
				// 	url: `/pagesC/home/personage/personage?userId=${this.video.shop_id}&circle_id=${this.video.circle_id}`
				// })
			},
			// 点赞与取消点赞
			handleFollow() {
				console.log(this.userInfo, "取关跟关注")
				if (this.clickLoading) {
					uni.showToast({
						title: "点击过于频繁 ~",
						icon: "none",
						duration: 1000
					})
					return
				}
				if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
					uni.showToast({
						title: "登录后才可以点赞噢 \r\n ∠( ᐛ 」∠)＿",
						icon: "none",
						duration: 2000
					})
					return
				}
				this.clickLoading = true
				let islike = this.video.is_like
				this.$http.videolike({
					videoid: this.video.id,
					islike
				}).then(res => {
					if (res.status == 200) {
						// this.video.is_like = islike == 0 ? 1: 0
						this.$emit('addLike', {
							islike: islike == 0 ? 1 : 0,
							praise_num: res.data
						})
					} else if (res.status == 400) {
						uni.showToast({
							title: "请先登录",
							icon: "none",
							duration: 1000
						})
					}
					this.clickLoading = false
				}).catch(err => {
					uni.showToast({
						title: "服务器异常",
						icon: "none",
						duration: 2000
					})
					this.clickLoading = true
					return
				})
			},
			// 旋转动画暂停
			pauseAnimate() {
				this.isPauseAnimate = true
			},
			// 旋转动画开启
			playAnimate() {
				this.isPauseAnimate = false
			},
			getCouponList() {
				var userinfos = this.userInfos
				uni.request({
					url: 'https://dsx.cdzer.com/api/Shops/shopcoup', //仅为示例，并非真实接口地址。
					data: {
						shop_id: this.video.shop_id,
						uid: userinfos.id
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.status == 200) {
							this.list = res.data.data
							this.isShow = !this.isShow
						} else if (res.data.status == 200) {
							this.open()
						} else {
							wx.showToast({
								title: res.data.mess,
								mask: true,
								icon: 'none',
								duration: 1500
							})
						}
					}
				});
				// this.$http.getShopcoup({
				// 	shop_id: this.video.shop_id,
				// 	uid: this.userInfo.id
				// }).then(res => {
				// 	uni.hideLoading()
				// 	if (res.status == 200) {
				// 		this.list = res.data
				// 		this.isShow = !this.isShow
				// 	} else if (res.status == 200) {
				// 		this.open()
				// 	} else {
				// 		wx.showToast({
				// 			title: res.mess,
				// 			mask: true,
				// 			icon: 'none',
				// 			duration: 1500
				// 		})
				// 	}

				// }).catch(err => {
				// 	wx.showToast({
				// 		title: '服务器错误',
				// 		mask: true,
				// 		icon: 'none',
				// 		duration: 1500
				// 	})
				// })
			},
			setCoupon(index) {
				this.list[index].have = 1
			},
			caozuo() {
				this.opened()
			},
			opened() {
				this.$refs.caozuo.open()
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			addfollow() {
				console.log(this.userInfos, "videoooooo")
				if (JSON.stringify(this.userInfos) == '{}') {
					var userinfos = {}
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					var userinfos = this.userInfos
					if (userinfos.status == 400) {
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					} else {
						let br_uid = this.video.uid
						let shop_id = this.video.shop_id
						let uid = userinfos.id
						uni.request({
							url: 'https://dsx.cdzer.com/api/CollShops/coll', //仅为示例，并非真实接口地址。
							data: {
								br_uid,
								shop_id,
								uid
							},
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
							},
							success: (res) => {
								console.log(res.data, "关注关注", this.token)
								if (res.data.status == 200) {
									uni.showToast({
										title: res.data.mess
									})
									this.video.is_follow = 1
								}
							}
						});
					}
				}
			},
			cancelFollow() {
				console.log(this.userInfos, "this.userInfos")
				if (JSON.stringify(this.userInfos) == '{}') {
					var userinfos = {}
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					var userinfos = this.userInfos
					console.log(userinfos, "userinfosuserinfosuserinfos")
					if (userinfos.status == 400) {
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					} else {
						let br_uid = this.video.uid
						let shop_id = this.video.shop_id
						let uid = userinfos.id
						uni.request({
							url: 'https://dsx.cdzer.com/api/CollShops/cancelcoll', //仅为示例，并非真实接口地址。
							data: {
								br_uid,
								shop_id,
								uid
							},
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
							},
							success: (res) => {
								console.log(res.data, "关注关注", this.token)
								if (res.data.status == 200) {
									this.video.is_follow = 0
									console.log(this.video)
									uni.showToast({
										title: res.data.mess
									})
								}

							}
						});
					}

				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.bot {
		// height: 344upx;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		display: flex;
		flex-direction: column;

	}

	.lista {
		width: 100%;
		height: 84upx;
		text-align: center;
		line-height: 84upx;
		padding-bottom: 30upx;
		border-bottom: 2upx solid #F5F5F5;
	}

	.listd {
		width: 100%;
		height: 120upx;
		text-align: center;
		line-height: 120upx;
		padding-bottom: 20upx;
		border-bottom: 2upx solid #F5F5F5;
	}

	.quxiao {
		height: 100upx;
		width: 100%;
		text-align: center;
		line-height: 100upx;
	}

	// .pinglun{
	// 	width: 100%;
	// }
	.share_btn {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.list-right {
		width: 120rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: column;
		// align-items: flex-end;
		justify-content: flex-end;

		.author-img {
			position: relative;
			width: 120rpx;
			text-align: center;
			// margin-left: 32rpx;
			margin-bottom: 20rpx;

			.img {
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}

			.follow {
				color: white;
				position: absolute;
				width: 66rpx;
				height: 47rpx;
				// background-color: #ff3d3d;
				border-radius: 20rpx;
				line-height: 47rpx;
				// background: red;
				// border-radius: 50%;
				text-align: center;
				left: 36rpx;
				font-size: 34upx;
				bottom: -88rpx;

				// font-weight: bold;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right-box {
			margin: 30rpx 0;
			color: white;
			text-align: center;
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			// justify-content: center;
			align-items: center;

			.fav {
				color: #F43F3B;
			}

			.count {
				text-align: center;
				margin-top: 15rpx;
				font-size: 34upx;
			}

			.icon {
				width: 53rpx;
				height: 50rpx;
				font-size: 70rpx;
				transition: color .5s;
			}
		}

		.music-img {
			width: 120rpx;
			height: 120rpx;
			text-align: center;
			margin-top: 40rpx;

			// margin-left: 24rpx;
			.img {
				width: 120rpx;
				height: 87rpx;
				// border-radius: 50%;
				// background: #F1F1F1;
				// opacity: .8;
				// border: 2px solid #F1F1F1;
			}
		}

		.pauseAnimate {
			animation-play-state: paused;
		}
	}

	@keyframes around {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
